<template>
	<view>
		<carHeader :title="'评价管理'"></carHeader>
		<view class="message" v-for="(item,index) in userList" :key="index">
			<view class="meHead">
				{{item.userName}}
				<view class="meButton" @click="gotoDetail(item)">
					查看详情
				</view>
			</view>
			<view class="meBody">
				<p class="orderNum">订单编号：{{item.ordNumber}}</p>
				<p class="socre"><span>综合评分：{{item.rating}}分</span>
					<view class="star" v-for="(i, indexInner) in item.rating" :key="indexInner">
						<u-icon name="star-fill" color="#ffc100">
						</u-icon>
					</view>
				</p>
				<p class="time">评价时间：{{item.createTime}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userList: [],
				list: []
			};
		},
		methods: {

			gotoDetail(item) {

				console.log(item);
				// 发起请求获取评价详情
				uni.request({
					url: 'http://localhost:8080/carShopService/evaluate/detail?ordNumber',
					data: {
						ordNumber: item.ordNumber
					},
					method: 'GET',
					success: (res) => {
						console.log(1111)
						if (res.statusCode === 200) {
							console.log(res);
							// 将 res 的数据转换为字符串形式
							const dataStr = JSON.stringify(res.data);
							 // 编码数据字符串，确保安全传递
							                const encodedData = encodeURIComponent(dataStr);
							uni.navigateTo({
								url: `/pages/successOrder/successOrder?data=${encodedData}`

							})
						}
					}
				});
			}
		},
		onLoad() {
			const that = this;
			uni.request({
				url: 'http://localhost:8080/carShopService/evaluate/list',
				method: 'GET',
				success: function(res) {
					if (res.statusCode === 200) {
						console.log(res)
						console.log(res.data.rows)
						that.userList = res.data.rows
					} else {
						console.log('请求失败，状态码:', res.statusCode);
					}

				},
				fail: function(err) {
					console.log('请求失败', err);
				}
			});
		}
	}
</script>

<style lang="scss">
	.message {
		background-color: #fff;
		margin: 30rpx 20rpx;
		padding: 30rpx;
		border-radius: 30rpx;
		position: relative;
		top: -280rpx;

		.meHead {
			font-size: 36rpx;
			padding-bottom: 15rpx;
			border-bottom: 5rpx solid #f7f7f7;

			.meButton {
				display: inline-block;
				position: relative;
				left: 350rpx;
				background-color: #0863e7;
				border-radius: 50rpx;
				width: 200rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				color: #FFF;
			}
		}

		.meBody {
			margin-top: 20rpx;

			.orderNum {
				color: #3f89fa;
				margin-bottom: 10rpx;
			}

			.socre {
				margin-bottom: 10rpx;

				span {
					margin-right: 20rpx;
				}

				.star {
					display: inline-block;
				}
			}

			.time {
				color: #858585;
			}
		}
	}
</style>